<template>
  <el-select
    v-model="value"
    style="width: 100%"
    v-bind="componentProp"
    placeholder
    collapse-tags
    :filterable="searchable"
    :remote="searchable"
    v-on="cellEditorParams.event"
  >
    <i
      v-if="searchable"
      slot="prefix"
      class="el-icon-search"
    />
    <el-option
      v-for="item in (componentProp.optionList || [])"
      :key="item.key"
      :label="item.label"
      :value="item.value"
      :disabled="item.disabled"
    />
  </el-select>
</template>

<script>
import Vue from 'vue'
export default Vue.extend({
  data () { return { value: null } },
  computed: {
    parent () {
      return this.params.context.componentParent
    },
    newColDef () {
      return this.parent.findColDef(this.params.colDef, this.parent.columnDefs)
    },
    cellEditorParams () {
      return this.newColDef.cellEditorParams || {}
    },
    componentProp () {
      return this.cellEditorParams.componentProp || {}
    },
    searchable () {
      return this.cellEditorParams.searchable
    }
  },
  beforeMount () {
    this.value = this.params.data[this.newColDef.field]
  },
  methods: {
    getValue () { return this.value }
  }
})
</script>
